$(function () {
  // ---------------  1.创建剪裁区 ------------------
  // - 设置配置项
  let option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
  }
  // - 调用cropper方法，创建剪裁区
  $('#image').cropper(option)

  // --------------- 2. 点击选择头像，能够实现选择图片 --------------------
  $('#chooseFile').on('click', function () {
    $('#file').click()
  })

  /* 
- 文件域注册 change 事件，当文件域内容改变后触发
- 找到选择的文件（文件对象）
- 为文件对象创建一个临时的url
- 更换剪裁区的图片 */
  // --------------- 3. 文件域内容改变了，能够更换剪裁区的图片 -------------
  $('#file').on('change', function () {
    // console.log(12)
    if (this.files.length > 0) {
      // 3.1 找到文件对象
      // console.dir(this);
      let fileObj = this.files[0]
      // 3.2 为文件对象创建临时的url
      let url = URL.createObjectURL(fileObj)
      // console.log(url);
      // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
      $('#image').cropper('replace', url)
    }
  })

  // --------------- 4. 点击确认修改按钮，实现更换头像 ------------------
  $('#sure').on('click', function () {
    // 1. 剪裁图片，得到canvas
    let canvas = $('#image').cropper('getCroppedCanvas', { width: 30, height: 30 })
    // 2. 把canvas转成base64格式字符串
    let base64 = canvas.toDataURL()
    console.log(base64)
    // 3. ajax提交即可  
    axios
       // 头像数据base64格式字符串比较复杂,传递过程中需要收到编码encodeURIComponent()
      .post(`/my/update/avatar`, `avatar=${encodeURIComponent(base64)}`)
      .then(res => {
        let {
          data: { status, message }
        } = res
        if (status === 0) {
          layer.msg(message)
          // 更新index.html的头像
          window.parent.getUserIfon ()
        }
      })
  })
})
